<template>
  <el-drawer
    v-model="drawerVisible"
    :title="title"
    :size="size"
    :direction="direction"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :modal="modal"
    :with-header="withHeader"
    :before-close="handleClose"
    destroy-on-close
    class="custom-drawer mb-0"    
    header-class="custom-drawer-header text-white"    
  >
    <template #header v-if="$slots.header">
      <slot name="header" class="mb-0"></slot>
    </template>    
    <div class="drawer-content bg-white rounded-lg">
      <slot></slot>
    </div>
    <template #footer v-if="showFooter">
      <div class="drawer-footer">
        <slot name="footer">
          <el-button @click="handleCancel">{{ cancelText }}</el-button>
          <el-button type="primary" :loading="confirmLoading" v-if="isShowConfirm" @click="handleConfirm">
            {{ confirmText }}
          </el-button>
        </slot>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  // 控制抽屉显示/隐藏
  modelValue: {
    type: Boolean,
    default: false
  },
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 抽屉宽度
  size: {
    type: [String, Number],
    default: '30%'
  },
  // 抽屉方向
  direction: {
    type: String,
    default: 'rtl'
  },
  // 是否显示关闭按钮
  showClose: {
    type: Boolean,
    default: true
  },
  // 是否显示遮罩层
  modal: {
    type: Boolean,
    default: true
  },
  // 点击遮罩层是否关闭
  closeOnClickModal: {
    type: Boolean,
    default: true
  },
  // 按ESC是否关闭
  closeOnPressEscape: {
    type: Boolean,
    default: true
  },
  // 是否显示头部
  withHeader: {
    type: Boolean,
    default: true
  },
  // 是否显示底部
  showFooter: {
    type: Boolean,
    default: true
  },
  // 确认按钮文字
  confirmText: {
    type: String,
    default: '确定'
  },
  // 取消按钮文字
  cancelText: {
    type: String,
    default: '取消'
  },
  // 确认按钮加载状态
  confirmLoading: {
    type: Boolean,
    default: false
  },
  // 是否显示确认按钮
  isShowConfirm: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue', 'cancel', 'confirm'])

const drawerVisible = ref(props.modelValue)

// 监听抽屉显示状态
watch(() => props.modelValue, (val) => {
  drawerVisible.value = val
})

watch(() => drawerVisible.value, (val) => {
  emit('update:modelValue', val)
})

// 关闭前的回调
const handleClose = (done) => {
  done()
}

// 取消
const handleCancel = () => {
  drawerVisible.value = false
  emit('cancel')
}

// 确认
const handleConfirm = () => {
  emit('confirm')
}
</script>

<style>
.ep-drawer__header {
  @apply mb-0 p-3;
  background: #f93237;
}
.ep-drawer__body {
  @apply p-3;
}
.ep-drawer__close:hover {
  @apply bg-white rounded-full;
}
.custom-drawer {
  background: #f3f4f6;
  :deep(.el-drawer__close) {
    color: white !important;
    font-size: 20px;
    transition: all 0.3s;
  }

  :deep(.el-drawer__body) {
    padding: 0 !important;
    height: calc(100% - 55px);
    overflow-y: auto;
  }

  .drawer-content {
    padding: 10px;
    height: 96%;
    box-sizing: border-box;
  }

  .drawer-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 20px;
    background: #fff;
    border-top: 1px solid #e4e7ed;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}

/* 兼容 element-plus 的旧类名 */
.el-drawer__close-btn {
  &:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50%;
  }
  &:active {
    background-color: rgba(255, 255, 255, 0.3) !important;
  }
}

.el-drawer__close {
  color: white !important;
  font-size: 20px;
  transition: all 0.3s;
}
</style>


